<template>
  <body class="login-page">
  <el-form class="login-container" label-position="left" label-width="80px">
    <h3 class="login_title">登录</h3>
    <el-form-item label="账号">
      <el-input
          type="text"
          v-model="register.username"
          auto-complete="off"
      ></el-input>
    </el-form-item>
    <el-form-item label="昵称">
      <el-input
          type="text"
          v-model="register.nickname"
          auto-complete="off"
      ></el-input>
    </el-form-item>
    <el-form-item label="密码">
      <el-input
          type="password"
          v-model="register.password"
          auto-complete="off"
      ></el-input>
    </el-form-item>
    <el-form-item label="确认密码" >
      <el-input
          type="password"
          v-model="register.confirm"
      ></el-input>
    </el-form-item>
    <el-form-item style="width: 100%">
      <el-button
          type="primary"
          @click="reg()"
          class="but"
      >
        确认
      </el-button>
      <el-button
          type="warning"
          @click="router.push({path: '/'})"
          class="but"
      >
        返回
      </el-button>
    </el-form-item>
  </el-form>
  </body>
</template>

<script lang="ts" setup>
import {ref} from "vue";
import axios from "@/utils/axios";
import qs from "qs";
import {ElMessage} from "element-plus";
import router from "@/router";

const register = ref({
  username:"",
  password:"",
  confirm:"",
  nickname:"",
})

function reg(){
  if(register.value.password != register.value.confirm){
    ElMessage.error('两次密码不一致');
    return
  }
  axios.post(
      "/register",
      qs.stringify(register.value)
  )
      .then(res => {
        router.push({path: '/sy'})
        ElMessage({
          message: '注册成功',
          type: 'success',
        })
      })
      .catch(err => {
        console.log("register",register.value);
        console.log(err);
        ElMessage.error('注册失败')
      })
}
</script>

<style scoped>
.login-page {
  background-position: center;
  height: 100%;
  width: 100%;
  background-size: cover;
  position: fixed;
  background-image: url(../assets/bg.jpg);
}
body {
  margin: 0px;
}
.login-container {
  border-radius: 15px;
  background-clip: padding-box;
  margin-left: 150px;
  margin-top: 180px;
  width: 350px;
  padding: 35px 35px 15px 35px;
  background-color: #fdf6ec;
}

.login_title {
  margin: 0px auto 40px auto;
  text-align: center;
  color: #505458;
}
.but{
  width: 50px;
  margin: 0px auto
}
</style>
